@import "../../common.scss";

body {
	background-color: #F7F7F7;
}


.mui-scroll-wrapper{
	background-color: #fff;
}

.scrollx-content {
	width: 100%;
	position: relative;
	z-index: 11;
	overflow-x: auto;
	white-space: nowrap;
	background-color: #fff;
	height: ws(44);
	box-shadow: $shaow-bottom;
	&::-webkit-scrollbar {
		display: none;
	}
}

.nav {
	padding: 0 ws(16) 0 ws(10);
	margin: 0;
	height: ws(44);
	display: flex;
	align-items: center;
}

.item {
	line-height: ws(44);
	height: ws(44);
	padding: 0 ws(15);
	color: #414141;
}

.active {
	color: $main-color;
	position: relative;
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: ws(2);
		background-color: $main-color;
	}
}

.sub-content {
	position: absolute;
	z-index: 10;
	top: ws(44);
	left: 0;
	bottom: 0;
	right: 0;
	overflow-y: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	.list {
		padding: ws(15);
		padding-bottom: unset;
		.list-item {
			border-radius: ws(5);
			background-color: #fff;
			box-shadow: $shaow-bottom;
			padding: ws(15);
			padding-bottom: ws(10);
			margin-bottom: ws(15);
			.item-warpper {
				display: flex;
				.item-image {
					width: ws(170/2);
					height: ws(170/2);
					margin-right: ws(15);
					background: #eee;
					>img {
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
				}
				.item-desc {
					flex: 1;
					display: flex;
					flex-direction: column;
					.title {
						font-size: ws(28/2);
						line-height: ws(21);
						color: #414141;
						@include one-line;
					}
					.flex-sal {
						display: flex;
						padding: ws(4) 0;
						align-items: flex-end;
						justify-content: space-between;
						.price {
							font-size: ws(30/2);
							font-weight: bold;
							color: #ff0c35;
						}
						.distance {
							font-size: ws(12);
							color: #adadad;
						}
					}
					.item-map {
						width: ws(215);
						@include one-line;
						img {
							width: ws(10);
							height: ws(12);
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
}


.detail {
	.detail-img {
		height: ws(250);
		position: relative;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			left: 0;
			background-image: linear-gradient(rgba(#fff,.4),rgba(#000,.0));
		}
		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.desc {
		background-color: #fff;
		padding: ws(12) ws(15);
		.name {
			font-size: ws(18);
			font-weight: bold;
			margin-bottom: ws(10);
		}
		.detailed {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: ws(10);
			margin-bottom: ws(10);
			@include border-line(#e0e0e0, bottom);
			.price {
				color: red;
				font-size: ws(14);
				font-weight: bold;
				margin-right: ws(40);
			}
		}
		.contact {
			display: flex;
			align-items: center;
			.map {
				flex: 1;
				display: flex;
				align-items: flex-start;
				position: relative;
				padding-right: ws(15);
				margin-right: ws(15);
				>img {
					margin-top: ws(2);
					margin-right: ws(5);
					width: ws(15);
				}
				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					width: ws(1);
					height: 100%;
					background-color: #e0e0e0;
				}
			}
			.ipone {
				width: ws(30);
				height: ws(30);
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $main-color;
				border-radius: 50%;
				>img {
					width: ws(20);
					height: ws(20);
				}
			}
		}
	}
	.presentation{
		margin-top: ws(15);
		padding: ws(12) ws(15);
		padding-bottom: ws(70);
		background-color: #fff;
		.title{
			font-weight: bold;
			display: flex;
			align-items: center;
			padding-bottom: ws(10);
			margin-bottom: ws(10);
			@include border-line(#e0e0e0, bottom);
			> img {
				width: ws(18);
				height: ws(18);
				margin-right: ws(5);
			}
		}
		.detail{
			> img{
				max-width: 100%;
				margin-bottom: ws(10);
			}
		}
	}
	.bottom-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: ws(50);
		background-color: #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: ws(30/2);
		.collect{
			padding-right: ws(15);
			margin-left: ws(15);
			display: flex;
			align-items: center;
			.collect-icon{
				width: ws(42/2);
				height: ws(42/2);
				margin-right: ws(5);
			}
		}
		.relation{
			flex: 1;
			background-color: #4fa8e9;
			height: ws(50);
			line-height: ws(50);
			color: #fff;
			text-align: center;
		}
	}
}
